<template>
  <div class="page">
    <myHeader class="my-header"></myHeader>


    <div class="container">
      <div class="plate1">
        <div class="plate1-left plate1-left1">
          <div class="plate1-title">CEO NMN 18000</div>

          <div>
            <img style="width: 100%;" src="../assets/n18.jpg" alt="">
          </div>

          <div class="plate1-left-content">
            專利NMN,啟動長壽蛋白,深度煥活細胞
            哈佛醫學院證實,NAD+隨年齡增長下降,導致衰老現象
            隨著年齡增長,特別是25歲以後,體內的NAD+濃度會逐漸降低,這導致生物體能量的「發電機」——細胞線粒體的功能衰退,從而引發衰老及各種機能衰退。哈佛醫學院等前沿科研成果證實,每日補充適量的NMN(β-煙醯胺單核苷酸)比直接補充NAD+更為有效。由於NAD+分子較大,無法被人體直接吸收利用；而通過外源補充劑補充NMN,可以有效提升人體NAD+水準,這是補充NAD+的直接且迅速的有效方法,使身體重囘「年輕狀態」。
          </div>


          <div class="gongxiao">NMN提升NAD+ 最直接有效之方式</div>

          <!-- <div>
            <img style="width: 100%;" src="../assets/N15000.png" alt="">
          </div> -->

          <div class="plate1-left-content">
            NMN提升NAD+ 最直接有效之方式
            NMN β-煙醯胺單核苷酸/β-Nicotinamide
            Mononucleotide 是NAD+最直接的前體 也是在所有生物包括人體和各種食物中天然存在的物質。只是NMN在食物中的含量微乎其微 因而單純依靠日常食物得到足夠補充。
          </div>



          <div class="gongxiao">修復受損DNA</div>

          <div class="plate1-left-content">
            NAD+是DNA修復酶PARP的必要底物,對DNA修復、基因表達、細胞週期發展、細胞存活、染色體重建和基因穩定性等有重大影響。
          </div>



          <div class="gongxiao">從源頭抑制衰老</div>
          <div class="plate1-left-content">
            NMN複配PQQ(吡咯喹啉醌),修復受損的線粒體,增加線粒體的數量和含量,通過增強內源性抗氧化酶的活性(如SOD),由此雙向協同增加體內NAD+水準,優化細胞抗氧化能力,從源頭延緩衰老。
          </div>

          <div class="gongxiao">活化腦細胞</div>
          <div class="plate1-left-content">經過多項動物實驗證明,PQQ還能抑制炎症性細胞因數的釋放,改善神經功能,進而保護腦部的認知能力[2],增強腦部記憶力[3]。
          </div>


        </div>

        <div class="plate1-right plate1-right1">

          <div class="plate1-title">CEO NMN 15000</div>

          <div>
            <img style="width: 100%;" src="../assets/n15.jpg" alt="">
          </div>

          <div class="plate1-right-content">
            澳門科技大學的研究人員發現,NMN通過與人參皂苷Rh2協同能讓NAD+提升的效果倍增。當人參皂苷Rh2聯合NMN可使當NMN與Rh2聯合使用時,肺組織中的NAD+水準顯著提高了1.97倍。單獨口服時,NMN主要富集於肝臟。而NMN+人參皂苷rh2聯合NMN可使其在腦、心、腎和肺組織中的NMN分佈濃度分別提高4.14倍、2.31倍、4.47倍和2.39倍。
          </div>






          <div class="gongxiao">提升肝臟的排毒功能,補腎氣色佳</div>
          <div class="plate1-right-content">人參皂苷的單體成分Rh2搭配蟲草素,能促使人參皂苷中的稀有單體Rg3含量明顯上升
            蟲草素是從冬蟲夏草中分離的一種活性成分,能雙重增強幹細胞的吞噬功能,增強肝臟的解毒和抗肝炎病毒作用,有效改善脂肪肝。
            中醫所說的“肝腎同源”,便是讓體內肝血充足,腎精自然能得到更好的補充,“肝好硬度強”,能提高機體運動能力,快速從疲勞中恢復體力。
            女性使用可增強細胞的活力和生命力,幫助肌膚排出毒素和廢物使肌膚更緊致富有彈性,同時抑制酪氨酸酶的活性,安全有效地提亮膚色。
          </div>


          <div class="gongxiao">適用人群</div>
          <div class="plate1-right-content"> 有養顏抗衰需求人士 NMN作為一種抗氧化劑,可以抵抗自由基對皮膚的損害,延緩皮膚衰老；
            關注腦部健康及腦力工作人士：保護腦細胞,緩解精神壓力,提高認知能力並增強注意力和記憶力；
            工作壓力大,需改善體力人士：提升能量水準和反應速度；
            關注三高人士：如糖尿病、高血糖、高血壓、高血脂等慢性疾病；
            熬夜者：增強細胞能量產生,加快機體恢復,改善代謝；
            飲酒者：提高解酒能力,保護肝臟,修復因乙醛毒性損傷的肝細胞；
            失眠者：調節生物時鐘,改善睡眠品質,對晝夜顛倒或年齡增長引起的睡眠障礙都有幫助。</div>


          <div class="gongxiao">服用建議</div>
          <div class="plate1-right-content"> *成人,每日1次,每日1-2粒。建議早上空腹服用或早餐1h後服用。連續服用3個月,以達至產品最佳保健效果
            *所有成分均經過科學研究及臨床機構的支持,確保安全、有效。</div>

        </div>
      </div>
    </div>


    <myFooter></myFooter>
  </div>


</template>

<script>
import myFooter from '../components/myFooter.vue';
import myHeader from '../components/myHeader.vue';


export default {
  name: 'HomePage',
  components: {
    myFooter,
    myHeader
  },
  data() {
    return {
      currentCls: 0,
      totalNum: 0,
      pageSize: 6,
      pageIndex: 1,
      classify: [
        { name: '所有产品' },
        { name: '高端功效型' },
        { name: '母婴莉莉斯' },
        { name: '日销爆款' },
        { name: '香港濟風堂' }
      ],
      list: [],
    }
  },
  async mounted() {
    let params = {
      searchStr: '',
      category: null,
      pageSize: this.pageSize,
      pageIndex: this.pageIndex
    }
    this.getData(params);

  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },

    async getData(params) {
      try {
        let res = await this.$api.productList(params);
        this.list = res.data.data;
        this.totalNum = res.data.totalNum;
        console.log(this.list)
      } catch (err) {
        console.log(err)
      }
    },


    currentChange(index) {
      // console.log(e);
      this.currentCls = index;

      let params = {
        searchStr: '',
        category: this.currentCls,
        pageSize: this.pageSize,
        pageIndex: this.pageIndex
      }
      this.getData(params);

    },

    pageChange(e) {
      console.log(e);
      let params = {
        searchStr: '',
        category: null,
        pageSize: this.pageSize,
        pageIndex: e
      }
      this.getData(params);
    }
  }
}
</script>

<style lang="less" scoped>
/* 定义动画 */
@keyframes moveright {
  0% {
    transform: translateX(-2);
  }

  50% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(-2px);
  }
}

.page {
  .container {
    padding-top: 115px;
    width: 100%;
    margin: 0 auto;

    .model-1 {
      padding-top: 50px;
      display: flex;
      justify-content: space-between;

      .p-left {
        width: 269px;

        .p-left-title {
          font-size: 30px;
          margin-bottom: 20px;
        }

        .p-left-item {
          width: 269px;
          background-color: #1a7567;
          height: 50px;
          line-height: 50px;
          color: white;
          display: flex;
          padding: 0 10px;
          justify-content: space-between;
          margin-bottom: 5px;
          border-radius: 10px;

          .current-icon {
            animation: moveright 1s infinite;
          }
        }

        .currentCls {
          background-color: #07483e;
          width: 272px;
          height: 54px;
          line-height: 54px;
        }
      }

      .p-pagin {
        margin: 10px;
      }

      .p-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 30px 30px 30px;

        // &::after {
        //     content: '';
        //     flex: auto;
        // }

        .p-item {
          // height: 484px;
          background: white;
          margin: 10px;
          padding: 10px;
          font-size: 18px;
          box-shadow: 0px 0px 10px #b0b0b0;
          border-radius: 5px;

          .p-item-yj {
            text-decoration: line-through;
          }

          .p-item-xj {
            font-weight: 700;
            margin-left: 10px;
          }

          .p-item-title {
            overflow: hidden;
            height: 28px;
            width: 232px;
          }


          .p-item-img {
            width: 232px;
            height: 232px;
          }

        }
      }
    }
  }
}


.banner-box {
  text-align: center;
  background-color: #e9e9eb;
  margin-top: 105px;

  .banner {
    width: 100%;
    display: block;
  }
}

.video-box {
  padding: 20px 10vw 0 10vw;

  .publicity-video {
    width: 100%;
  }
}


.plate1-1 {
  border-bottom: 1px solid #ddd;
}

.plate1-2 {
  border-bottom: 1px solid #ddd;
}

.plate1-3 {
  border-bottom: 1px solid #ddd;
}

.plate1-4 {
  border-bottom: 1px solid #ddd;
}

.plate1-5 {
  border-bottom: 1px solid #ddd;
}

.plate1-6 {
  border-bottom: 1px solid #ddd;
}

.plate1 {
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;

  .plate1-left {
    width: 37.6%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-left-content {
      font-size: 13px;
    }
  }

  .plate1-left1 {
    width: 48%;
  }



  .plate1-right {
    width: 57.2%;

    .gongxiao {
      font-size: 20px;
      font-weight: 700;
    }

    .plate1-title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .plate1-right-content {
      font-size: 13px;
    }

    .plate1-right-mid {
      display: flex;
      justify-content: space-around;
      font-size: 16px;


      .plate1-right-mid-cell {
        text-align: center;

        .iconfont {
          font-size: 36px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }


    }

    .plate1-right-foot {
      .p-list {
        display: flex;

        .p-item {
          text-align: center;

          .p-item-img {
            width: 200px;
          }
        }
      }
    }

  }


  .plate1-right1 {
    width: 48%;
  }
}

@media (min-width: 1200px) {
  .plate1 {
    width: 1170px;
    margin: 0 auto;
  }
}





.honor {
  .honoe-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    padding: 20px 0;
  }

  .honor-box {
    margin: 10px 0;
    display: flex;
    padding: 0 10vw;
    justify-content: space-around;
    flex-wrap: wrap;

    .cer-img {
      width: 117px;
      height: auto;
    }
  }

}



.back-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  border-radius: 5px;
  background-color: black;
  color: white;
}

@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }

  .plate1 {
    display: block;
    padding-top: 30px;

    .plate1-left {
      width: 100%;
      padding: 10px 5% 0 5%
    }

    .plate1-right {
      width: 100%;
      padding: 10px 5% 0 5%;

      // .plate1-right-content {
      //   font-size: 13px;
      //   color: red;
      // }

      .plate1-right-foot {
        .p-list {
          display: flex;

          .p-item {
            text-align: center;

            .p-item-img {
              width: 100px !important;
            }
          }
        }
      }
    }
  }

  .video-box {
    padding: 5px 0vw 0 0vw;

    .publicity-video {
      width: 100%;
    }
  }


  .honor {
    .honoe-title {
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      padding: 20px 0;
    }

    .honor-box {
      margin: 10px 0;
      display: flex;
      padding: 0 10vw;
      justify-content: space-around;
      flex-wrap: wrap;

      .cer-img {
        width: 90px;
        height: auto;
      }
    }

  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;
  }

  .p-item-img {
    width: 90vw !important;
    height: auto !important;
  }

  .footer {
    height: 138px;
  }
}







@media (max-width: 768px) {
  .banner {
    width: 100vw;
  }


  .p-list {
    padding: 0;
    flex-wrap: wrap;

    .p-item {
      background: white;
      margin: 5px;
      padding: 10px;
      font-size: 18px;

      // width: 45vw !important;
      // height: auto !important;

      .p-item-yj {
        text-decoration: line-through;
      }

      .p-item-xj {
        font-weight: 700;
        margin-left: 10px;
      }

      .p-item-title {
        overflow: hidden;
        font-size: 14px;
        width: 40vw !important;
        height: auto !important;
      }


      .p-item-img {
        width: 150px !important;
        height: 150px !important;
      }

    }
  }

  .footer {
    height: 138px;
  }
}
</style>